<template>
  <div>
    <el-button type="success" @click="AddMenu">添加菜单</el-button>
    <br>
    <br>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderNum" label="编号" align="center" />
      <el-table-column prop="menuName" label="菜单名称" align="center" />
      <el-table-column prop="url" label="菜单Url" align="center" />
      <el-table-column prop="parentName" label="父级菜单名称" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createTime" label="创建日期" align="center">
        <template v-slot="scoped">
          {{ scoped.row.createTime == null ? '' : moment(scoped.row.createTime).format("yyyy-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" align="center" />
      <el-table-column prop="updateTime" label="修改日期" align="center">
        <template v-slot="scoped">
          {{ scoped.row.updateTime == null ? '' : moment(scoped.row.updateTime).format("yyyy-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" align="center" width="110">
        <template v-slot="scoped">
          <el-link type="warning" style="margin: 0 3px;" @click="Update(scoped.row)" size="small">修改</el-link>
          <el-link type="danger" style="margin: 0 3px;" @click="Delete(scoped.row.menuId)" size="small">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { compile, computed, onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import DepData from '@/stores/departmentData'
import axios from 'axios';
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();

//#region 添加菜单

const AddMenu = () => {
  router.push("/AddMenuView");
}


//#endregion


//#region  菜单删除
//子级状态
const deleteStatus = reactive({
  msg: '',
  code: 0,
  data: ''
})

//判断是否父级
const DeleteMenuJudge = (menuId: any) => {
  axios.get(`https://localhost:7174/api/Menu/DeleteMenuJudge?MenuId=${menuId}`).then(res => {
    deleteStatus.data = res.data.data
    deleteStatus.code = res.data.code
    deleteStatus.msg = res.data.msg
  })
}

//删除状态
const deleteStatu = ref("0")

//菜单删除提示删除所有子级及父级
const Delete = (Menuid: number) => {
  deleteStatus.code = 0;
  //判断是否为父级方法
  DeleteMenuJudge(Menuid)
  ElMessageBox.confirm(
    '确定删除吗?',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // DeleteMenuJudge(Menuid)
      //判断是否有子级
      if (deleteStatus.code == 216) {
        ElMessageBox.confirm(
          '是否删除所有子级?',
          '提示',
          {
            confirmButtonText: '删除所有子级',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            axios.delete(`https://localhost:7272/api/Menu/DeleteMenu?MenuId=${Menuid}`).then(res => {
              deleteStatu.value = res.data.data
              console.log(deleteStatu.value, "所有子级删除")
              if (deleteStatu.value == "1") {
                ElMessage.success("成功删除所有子级")
                show()
              } else {
                ElMessage.error("失败删除所有子级")
                show();
              }
            })
          })
          .catch(() => {
            ElMessage.error("已取消")
          })
      } else {
        axios.delete(`https://localhost:7272/api/Menu/DeleteMenu?MenuId=${Menuid}`).then(res => {
          deleteStatu.value = res.data.data
          console.log(deleteStatu.value, "子级删除")
          if (deleteStatu.value == "1") {
            ElMessage.success("删除成功")
            show();
          } else {
            ElMessage.error("删除失败")
            show();
          }
        })
      }
    })
    .catch(() => {
      ElMessage.success("已取消")
    })
}

//#endregion


//#region 菜单列表
//列表对象组
const tableData = ref([])

//获取菜单列表
const show = () => {
  axios.get('https://localhost:7174/api/Menu/GetMenuList', {}).then(res => {
    tableData.value = res.data.data
  })
}

onMounted(() => {
  show();
})
//#endregion

//#region  修改
//跳转修改
const Update = (data: any) => {
  console.log(data, "父级id")
  router.push({
    name: "UpdateMental",
    query: {
      menuName: data.menuName,
      menuId: data.menuId,
      parentId: data.parentId,
      url: data.url,
    }
  });
}
//#endregion


</script>

<style scoped></style>